<template>
    <div class="customerSelect">
        <assets-head :title="$t('联系客服')" />
        <div class="px-32 ">
            <div class="flex justify-between items-center py-20 px-20 border-b-grey" @click="toPath">
                <div class="flex items-center">
                    <img src="../../assets/image/line.png" alt="" class="w-70 h-70" />
                    <div class="ml-20">
                        <div class="font-32">Line</div>
                        <div class="font-30 text-grey">{{line}}</div>
                    </div>
                </div>
                <van-icon class="textColor" name="arrow" />
            </div>
            <div class="flex justify-between items-center py-20 px-20" @click="$router.push('/customerService')">
                <div class="flex items-center">
                    <img src="../../assets/image/kefu.png" alt="" class="w-70 h-70" />
                    <div class="ml-20">
                        <div class="font-32">{{$t('在线客服')}}</div>
                        <div class="font-30 text-grey">7x24h</div>
                    </div>
                </div>
                <van-icon class="textColor" name="arrow" />
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Icon } from 'vant';
    export default {
        props: {

        },
        components: {
            assetsHead,
            [Icon.name]: Icon,
        },
        data(){
            return {
                line:'https://lin.ee/sppCAGm'
            }
        },
        methods: {
            toPath(){
                window.open(this.line)
            }
        }
    }
</script>

<style lang="scss" scoped>
.customerSelect{
    width: 100%;
    box-sizing: border-box;
}
</style>